@use "sass:math";

.preferences {
  width: 100%;
  width: #{math.div(720, $base-font-size)}rem;
  max-width: 100%;
  max-height: 100%;
  z-index: 9999;
  padding: 0 #{math.div(20, $base-font-size)}rem #{math.div(2, $base-font-size)}rem #{math.div(20, $base-font-size)}rem;
  display: flex;
  flex-direction: column;
  outline: none;
  height: calc(80vh - #{math.div(65, $base-font-size)}rem);
  & .react-tabs {
    max-height: 100%;
    display: flex;
    flex-direction: column;
  }
  & .react-tabs__tab-panel {
    overflow-y: auto;
  }

  @media (min-width: 770px) {
    max-height: #{math.div(520, $base-font-size)}rem;
  }
}

.preference__minus-button,
.preference__plus-button {
  @include themify() {
    @extend %preferences-button;
    width: #{math.div(32, $base-font-size)}rem;
    height: #{math.div(32, $base-font-size)}rem;
    margin-left: #{math.div(6, $base-font-size)}rem;
    margin-right: #{math.div(10, $base-font-size)}rem;
    line-height: #{math.div(40, $base-font-size)}rem;
    & svg {
      width: #{math.div(10, $base-font-size)}rem;
    }
  }
}

.preference {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: #{math.div(12, $base-font-size)}rem;
  & + & {
    @include themify() {
      border-top: 1px dashed getThemifyVariable("button-border-color");
    }
  }
}

.preference__title {
  width: 100%;
  font-size: #{math.div(16, $base-font-size)}rem;
  margin-top: #{math.div(13, $base-font-size)}rem;
  margin-bottom: #{math.div(7, $base-font-size)}rem;
}

.preference__subtitle {
  @include themify() {
    color: getThemifyVariable("inactive-text-color");
  }
  width: 100%;
  margin-bottom: #{math.div(10, $base-font-size)}rem;
  margin-top: 0;
}

.preference__paragraph {
  margin-bottom: #{math.div(10, $base-font-size)}rem;

  & a {
    text-decoration: underline;
    @include themify() {
      color: getThemifyVariable('button-background-hover-color');
    }
  }
  & a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
  }
}

.preference__textarea {
  font-family: Inconsolata, monospace;
  width: 100%;
  min-height: 8em;
}

.preference__value {
  @include themify() {
    border: #{math.div(1, $base-font-size)}rem solid
      getThemifyVariable("button-border-color");
    // background-color: getThemifyVariable("button-background-color");
    color: getThemifyVariable("input-text-color");
    background-color: getThemifyVariable('input-background-color');
  }
  text-align: center;
  border-radius: 0%;
  outline: none;
  width: #{math.div(44, $base-font-size)}rem;
  height: #{math.div(40, $base-font-size)}rem;
  margin: 0 #{math.div(20, $base-font-size)}rem;
  padding: 0;
  font-size: #{math.div(16, $base-font-size)}rem;
  font-family: Inconsolata;
}

.preference__label {
  @include themify() {
    color: getThemifyVariable("secondary-text-color");
    &:hover {
      color: getThemifyVariable("heavy-text-color");
    }
  }
  margin: #{math.div(-15, $base-font-size)}rem 0 0 #{math.div(-5, $base-font-size)}rem;
  font-size: #{math.div(9, $base-font-size)}rem;
  width: #{math.div(44, $base-font-size)}rem;
}

.react-tabs__tab--selected {
  @include themify() {
    border-bottom: #{math.div(4, $base-font-size)}rem solid
      getThemifyVariable("button-background-hover-color");
  }
}

.react-tabs__tab--selected .preference__subheading {
  @include themify() {
    color: getThemifyVariable("primary-text-color");
  }
}

.react-tabs__tab {
  text-align: center;
  color: black;
  display: flex;
  align-items: center;
  border-bottom: #{math.div(4, $base-font-size)}rem solid transparent;
  & + & {
    margin-left: #{math.div(45, $base-font-size)}rem;
  }
  &:hover {
    @include themify() {
      border-bottom: #{math.div(4, $base-font-size)}rem solid
        getThemifyVariable("button-background-hover-color");
    }
  }
}

.preference__warning {
  @include themify() {
    display: contents;
    & a {
      text-decoration: underline;
      color: getThemifyVariable('button-background-hover-color');
    }
    & a:hover {
      text-decoration: underline;
      text-decoration-thickness: 0.1em;
    }
  }
}

.preference__radio-button {
  @extend %hidden-element;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.preference__option {
  @include themify() {
    @extend %preference-option;
    margin-right: #{math.div(25, $base-font-size)}rem;
  }
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.preference__option:last-child {
  margin-right: 0;
}

.preference__preview-button {
  @include themify() {
    @extend %preference-option;
    &:hover {
      color: getThemifyVariable("button-background-hover-color");
    }
  }
  margin-left: #{math.div(30, $base-font-size)}rem;
}

.preference__options {
  border: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preference__radio-button:checked + .preference__option {
  @include themify() {
    //for some reason this won't work for getThemifyVariable
    color: map-get($theme-map, "heavy-text-color");
    font-weight: bold;
  }
}
.preference__radio-button:focus + .preference__option,
.preference__radio-button:focus-visible + .preference__option {
  outline: 2px solid $dodgerblue; 
  outline-offset: 2px;
  border-radius: 4px;
}

.preference--hidden {
  @extend %hidden-element;
}

.preference__option.preference__canvas:not(:last-child) {
  padding-right: #{math.div(14, $base-font-size)}rem;
}

